<template>
  <el-aside>
    <el-tree :data="data" @node-contextmenu="floderOption" @node-click="handleNodeClick" node-key="id">
      <!--  -->
      <span class="custom-tree-node" slot-scope="{ node, data}" style="width:100%">
        <i class="el-icon-folder" style="color:#DFBA49;margin-right:59x"></i>
        <span style="font-size:15px">{{node.label}}</span>
      </span>
    </el-tree>
    <!-- 右键菜单栏 -->
    <div :style="{'z-index':999,'position':'fixed',left: optionCardX + 'px',
                top: optionCardY + 'px',
                width:'100px',
                background:'white','box-shadow':'0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04)'}"
      v-show="optionCardShow" id="option-button-group">
      <el-button @click="append" class="option-card-button">新建</el-button>
      <el-button @click="remove" class="option-card-button">删除</el-button>
      <el-button @click="rename" class="option-card-button">重命名</el-button>
    </div>
  </el-aside>
  
</template>

<script>
  export default {
    name: 'testIndex',

    data() {
      return {
        optionCardX: '',
        optionCardY: '',
        optionCardShow: false,
        optionData: [],
        clickNode: 0,
        node: null,
        tree: null,
        data: [{
          id: 1,
          label: '图层树',
        }],
        testData: [{
            name: '影像'
          },
          {
            name: '地形'
          },
          {
            name: '模型'
          },
          {
            name: '矢量'
          },
        ],
        testData2: [{
            id: 0,
            name: ''
          },
          {
            id: 1,
            name: '图层树'
          },
        ]
      }
    },


    // computed: {
    //   ...mapState({
    //     type: (state) => state.common.type,
    //     userType: (state) => state.common.userType
    //   })
    // },

    // mounted() {
    //   console.log(this.type, this.userType)
    // },

    methods: {
      // 右键菜单属性设置
      floderOption(e, data, n, t) {
        this.optionCardShow = false
        this.optionCardX = e.x
        this.optionCardY = e.y - 110
        this.optionData = data
        this.node = n
        this.tree = t
        this.optionCardShow = true
      },
      // 点击框外区域 隐藏菜单
      OptionCardClose(event) {
        var currentCli = document.getElementById("option-button-group");
        if (currentCli) {
          if (!currentCli.contains(event.target)) { //点击到了id为option-button-group以外的区域，就隐藏菜单
            this.optionCardShow = false;
          }
        }
      },
      // 创建
      append() {
        this.optionCardShow = false
        this.$prompt('请输⼊⽂件名', '提⽰', { // 弹出框⽤于输⼊⽂件名
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^\S{1,10}$/,
          inputErrorMessage: '命名不合法，请重新命名'
        }).then(({
          value
        }) => {
          if (this.node.level >= 3) {
            this.$message.error("最多只⽀持三级！")
            return false;
          }
          console.log(this.optionData.id);
          const newChild = { // 新建⼀个⼦节点
            id: id++,
            label: value,
            children: []
          };

          // TODO 测试修改
          //测试，在树形控件下方显示创建后的内容
          const newSet = {
            id: id++,
            name: value
          }

          console.log(this.optionData.children);
          if (!this.optionData.children) { // 如果当前节点没有⼦节点，那就新建⼀个空的⼦节点数组，⽤来存放新建⼦⽂件夹
            this.$set(this.optionData, 'children', []);
            this.$set(this.testData2, 'children', []) //测试，在树形控件下方显示创建后的内容
          }
          this.optionData.children.push(newChild); // 插⼊
          this.testData2.push(newSet)
          //同时展开节点
          if (!this.node.expanded) {
            this.node.expanded = true
          }
          this.$message({
            type: 'success',
            message: '⽂件夹新建成功！'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '创建失败'
          });
        });
      },
      // 删除
      remove() {
        this.optionCardShow = false
        this.$confirm('此操作将永久删除该⽂件夹, 是否继续?', '提⽰', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const parent = this.node.parent;
          const children = parent.data.children || parent.data;
          const index = children.findIndex(d => d.id === this.data.id);
          children.splice(index, 1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 重命名
      rename() {
        console.log(this.node)
        this.optionCardShow = false
        this.$prompt('请输⼊⽂件名', '提⽰', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPlaceholder: this.node.data.label,
          inputPattern: /^\S{1,10}$/,
          inputErrorMessage: '⽂件名长度在1到10之间'
        }).then(({
          value
        }) => {
          this.node.data.label = value
          this.$message({
            type: 'success',
            message: '⽂件夹已重命名！'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输⼊'
          });
        });
      },
      test(node) {
        console.log(node.id);
        this.clickNode = node.id
      },
      handleNodeClick(item, data) {
        console.log('item: ', item, 'data: ', data);
        this.test(data)
      }

    }
  }
</script>

<style scoped lang="scss">
  .folder-box {
    height: 100%;
  }

  .option-card-button {
    width: 100%;
    margin-left: 0;
    font-size: 10px;
    border-radius: 0;
  }
</style>
